import React, { useEffect, useState } from 'react'
import {
  Button,
  Form,
  Input,
  TreeSelect,
} from 'antd';
import '../components.css'
import { Link, useLocation } from 'react-router-dom'
import ProductService from '../../services/ProductService';
import { CloseCircleOutlined, CaretUpOutlined, MailOutlined } from '@ant-design/icons';


export default function UpdateProduct() {
  const [productName, setProductName] = useState("")
  const [productId, setProductId] = useState("")
  const [productQuantity, setProductQuantity] = useState("")
  const [productCompany, setProductCompany] = useState("")
  const [productType, setProductType] = useState("")
  const [productNumber, setProductNumber] = useState("")

  const location = useLocation()
  let path = location.pathname;
  let id = path.split('/')[3];

  const updataProduct = (p) => {
    p.preventDefault();
    const product = { productName, productId, productCompany, productNumber, productQuantity, productType }
    console.log(product);
    ProductService.updateProduct(id, product).then(response => {

    }).catch(error => {
      console.log(error);
    })
  }
  useEffect(() => {
    ProductService.getProductById(id).then(response => {
      setProductName(response.data.productName);
      setProductId(response.data.productId);
      setProductCompany(response.data.productCompany);
      setProductNumber(response.data.productNumber);
      setProductQuantity(response.data.productQuantity);
    }).catch(error => {
      console.log(error);
    })
  }, [])

  return (
    <div className='UpdataProduct'>
      <div className="title" style={{ paddingBottom: '30px' }}>updataProduct</div>
      <Form
        labelCol={{
          span: 5,
        }}
        wrapperCol={{
          span: 14,
        }}
        style={{
          marginLeft: '2%',
        }}
        layout="horizontal"
      >

        <Form.Item label="Product Name" tooltip="What do you want others to call you?">
          <Input value={productName} onChange={p => setProductName(p.target.value)} />
        </Form.Item>

        <Form.Item label="Product Id" >
          <Input value={productId} onChange={p => setProductId(p.target.value)} />
        </Form.Item>

        <Form.Item label="Product Company" >
          <Input value={productCompany} onChange={p => setProductCompany(p.target.value)} />
        </Form.Item>

        <Form.Item label="Product Number" >
          <Input value={productNumber} onChange={p => setProductNumber(p.target.value)} />
        </Form.Item>

        <Form.Item label="Product Type" >
          <Input value={productType} onChange={p => setProductType(p.target.value)} />
        </Form.Item>

        <Form.Item label="Product Quantity" >
          <Input value={productQuantity} onChange={p => setProductQuantity(p.target.value)} />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 5,
            span: 16,
          }}
          style={{
            marginTop: '50px'
          }}
        >
          <Button type="primary" onClick={(p) => updataProduct(p)} htmlType="submit" icon={<CaretUpOutlined style={{ marginRight: "2px" }} />}>
            <Link to='/productlist' style={{ color: "white" }}>Update</Link>
          </Button>

          <Button type='danger' style={{ marginLeft: "25px" }} icon={<CloseCircleOutlined style={{ marginRight: "2px" }} />}>
            <Link to='/productlist' style={{ color: "white" }}>Close</Link>
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
